<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
		<title>快捷报修</title>
		<link rel="stylesheet" href="../../assets/bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="../../assets/css/css.css" />
		<link rel="stylesheet" type="text/css" href="../../assets/datetime/css/styles.css" media="all">
		<link href="../../assets/css/sweetalert/sweetalert.css" rel="stylesheet" type="text/css">
		<script type="text/javascript">

			window.onload = function() {
				
				var obtn1 = document.getElementById("choice1");
				var obtn2 = document.getElementById("choice2");
				
				obtn1.onclick = function() {
					
					if(this.className == 'btn1 active')
						this.className = 'btn1 active';
						
					else {
						this.className = 'btn1 active';
						obtn2.className = 'btn2';
						
					}
				};
				obtn2.onclick = function() {
					if(this.className == 'btn2 active')
						this.className = 'btn2 active';
						
					else {
						this.className = 'btn2 active';
						obtn1.className = 'btn1';
						
					}
				};
			};
		</script>
	
	</head>

	<body>

		<div id="signModal">
			<div id="myTab" class="nav nav-tabs" style="height: 38px;" >
				<div class="active">
					<div class="menu">
						<div class="btn">
						<a href="#publicrepair" data-toggle="tab">
							<button class="btn1 active" id="choice1" >公共报修</button>
						</a>
						<a href="#peoplerepair" data-toggle="tab">
							<button class="btn2" id="choice2" >个人报修</button>
						</a>
						</div>
					</div>
					<input type="hidden" id="type" value="">
				</div>
			</div>
			<div id="myTabContent" class="tab-content">
				
				<div class="tab-pane fade in active" id="publicrepair">
					<div class="content" style="height:auto;">
						<input type="hidden" id="type2" value="2">
						<div class="address" style="border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;">
							<span class="glyphicon glyphicon-home"></span>
							<input type="text"  id="hInfo1" readonly="readonly" placeholder="请选择地址" size="22" style="border-left:0px;border-top:0px;border-right:0px;border-bottom:1px"/>
						</div>
						<div class="type"  style=" border-bottom: 1px solid #ccc;">
							<span class="glyphicon glyphicon-th-large"></span>
							<input type="text"  id="publicInfoName" readonly="readonly" placeholder="请选择公共设施" size="22" style="border-left:0px;border-top:0px;border-right:0px;border-bottom:1px;"/>
						</div>
						<form action="" method="post">
							<div>
								<textarea id="repairText1" rows="8" placeholder="请填写故障描述帮助我们尽快解决问题" ></textarea>
							</div>
							<span class="num_pic">
								<span id="pwords">0</span>/500
							</span>
							<div style="height: 186px;">
								<div style="font:inherit;color: #9d9d9d;margin: 4px 0px 0px 14px;">添加照片</div>
									<!-- <a href="javascript:;" class="file"><input type="file" class="showImgBtn" style="opacity:0; cursor:pointer ;position: absolute;width: 110px;height: 112px;"
								 		id="ImageZero" name="ImageZero"></a> -->
								 	<input type="file" style="opacity:0; font-size:0; cursor:pointer ;position: absolute;width: 50%;height: 80%;margin-left: 10px;"
									id="publicImageOne" name="publicImageOne"> 
									<img src="../../assets/images/pictop.png" class="roleLogoPic"
									style="width: 50%;height: 80%;margin-left: 10px;" id="public_ImageOne">	
									<br />
									<input type="text" readonly="readonly" value="上传图片需要一定的缓冲时间，请您耐心等待提示！" style="color: red;width: 100%;height:30px;border: 0;margin: 8px 1px 1px 1px;"/>
								 		
							</div>
						</form>
					</div>
					<div  >
						<div class="confirm" style="margin: 40px 1px 50px 1px;">
							<button class="btn" id="publicBtn" style="color:#fefefe;border:0;">提交</button>
						</div>
					</div>
					
					
				</div>
				<div class="tab-pane fade" id="peoplerepair">
					<div class="content" style="height:655px;">
						<input type="hidden" id="type1" value="1">
							<div class="address" style="border-top: 1px solid #ccc;">
						<img src="../../assets/images/img/home.png" style="position:relative;width: 29px;
						margin-left: 15px;margin-right: 5px;margin-top: 10px;">
						<input type="text"  id="hInfo" readonly="readonly" placeholder="请选择地址" size="22" />
					</div>
					<div class="address" style="border-top: 1px solid #ccc;">
						<img src="../../assets/images/img/R.png" style="position:relative;width:48px;">
						<input id="name" type="text" readonly="readonly" placeholder="姓名" size="22" maxLength="15" >
						<img src="../../assets/images/img/tel.png" style="margin: 8px 0px 0px 0px;">
						<input id="phone" type="text" readonly="readonly" placeholder="电话" size="22" maxLength="11" >
					</div>
					<div class="address" style="border-top: 1px solid #ccc;">
						<img src="../../assets/images/img/A.png" style="position:relative;width:50px;float:left;">
						<!-- <input type="text" class="demo-input" placeholder="请选择方便上门的日期" id="test1"> -->
						<div style="width:50%;float:left;text-align: center;background-color: #fff;" class="iDate date">
							<button type="button" class="addOn" >
								<input type="text" value="请选择方便上门的日期" placeholder="请选择方便上门的日期"  class="demo-input" id="text1" name="text1" style="height: 116%;top:10px;left: 8px;width:120%">
							</button>
						</div>
						<!-- <p id="p1">请选择方便上门的日期</p> -->
						<a href="#"><img  src="../../assets/images/img/right.png" style="position:relative;float:right;width:40px;top: 8px;"></a>
					</div>
					<div class="address" style="border-top: 1px solid #ccc;font-size:18px;">
						<img src="../../assets/images/img/B.png" style="position:relative;width:50px;float:left;">
						<!--  style="width: 82%;border-radius: 5px;border: 0px;" -->
						<select id="selsctTime" style="width: 80%;border-radius: 5px;border: 0px;background-color:#fefefe;margin-top: 13px;margin-left: 8px;font-size: 16px;">
								<option>请选择具体时间</option>
								<option value="08:00-09:00">08:00-09:00</option>
								<option value="09:00-10:00">09:00-10:00</option>
								<option value="10:00-11:00">10:00-11:00</option>
								<option value="11:00-12:00">11:00-12:00</option>
								<option value="12:00-13:00">12:00-13:00</option>
								<option value="13:00-14:00">13:00-14:00</option>
								<option value="14:00-15:00">14:00-15:00</option>
								<option value="15:00-16:00">15:00-16:00</option>
								<option value="16:00-17:00">16:00-17:00</option>
								<option value="17:00-18:00">17:00-18:00</option>
							</select>
					</div>
					<div class="type" style="border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;">
						<img src="../../assets/images/img/C.png" style="position:relative;width:48px;margin-left: -48px;">
						<input id="FaultName" type="text" readonly="readonly" placeholder="故障类别" size="8px"  style="border:0px;position:relative;left:0%;width: 25%;">
						<img src="../../assets/images/img/right1.png" style="position:relative;width:20px;">
						<input id="InfoName" type="text" readonly="readonly" placeholder="故障详情" size="15px"  style="border:0px;position:relative;left:0%;width: 34%;text-align: right;">
						<img src="../../assets/images/img/right1.png" style="position:relative;width:20px;left:4%">
					</div>
					<form action="" method="post">
						<div>
							<textarea id="repairText" rows="8" placeholder="请填写故障描述帮助我们尽快解决问题"></textarea>
						</div>
						<span class="num_words" >
							<span id="words">0</span>/500
						</span>
						<div style="height: 160px;">
							<div style="font:inherit;color: #9d9d9d;margin: 4px 0px 0px 14px;">添加照片</div>
							<!-- <a href="javascript:;" class="file"><input type="file" class="showImgBtn" style="opacity:0;  cursor:pointer ;position: absolute;width: 110px;height: 112px;"
								 id="ImageZero" name="ImageZero">
							</a> -->
							<input type="file" style="opacity:0; font-size:0; cursor:pointer ;position: absolute;width: 50%;height: 80%;margin-left: 10px;"
									id="ImageZero" name="ImageZero"> 
							<img src="../../assets/images/pictop.png" class="roleLogoPic"
									style="width: 50%;height: 80%;margin-left: 10px;" id="ImgZero">
							<br />
							<input type="text" readonly="readonly" value="上传图片需要一定的缓冲时间，请您耐心等待提示！" style="color: red;width: 100%;border: 0;margin: 8px 1px 1px 1px;"/>
							<span class="num_pic" style="position: absolute;bottom: 10px;right: 10px; color: #7e7e7e;"></span>
						</div>
					</form>
							
					<div class="confirm" style="position: relative;top: 40px;">
						<button class="btn" id="repairBtn" style="color: #fefefe;border:0;">提交</button>
					</div>
				</div>
			</div>
			<div class="menu_child">
				<button style="border-right: 1px solid #d6d6d6;" class="menu_active" id="search1"><span class="glyphicon glyphicon-wrench"></span>快捷报修</button>
				<button id="search2"><span class="glyphicon glyphicon-list-alt" ></span>报修记录</button>
			</div>
			
		</div>		
		
		<!-- 个人报修的故障类别 -->
		<div class="modal fade bs-example-modal-lg" tabindex="-1" id="selectFaultName" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
		    <div class="modal-dialog modal-lg" style="top: 110px;">
		        <div class="modal-content">
		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
		                <h4 class="modal-title">故障类别</h4>
		            </div>
		            <div class="modal-body">
		                <form id="selectfaultNameForm" class="form-horizontal form-bordered" role="form">
		                    <div class="form-group">
		                        <div class="col-sm-10" style="width: 100%">
		                            <select class="form-control" id="faultName" name="faultName" style="width: 100%;">
		                        		
		                        	</select>
		                        </div>
		                    </div>
		                    
							<div class="form-group">
								<div class="col-sm-offset-2 col-sm-10" style="text-align: center;">
									<button type="button" id="faultNameBtn" class="btn" style="background-color:#02bb99; color:#fefefe;border:0;width: 40%;">保存</button>
								</div>
							</div>
	                	</form>
	                </div>
	            </div>
	        </div>
	    </div>
	    
	</div>
		<!-- 选择故障详情 -->
		<div class="modal fade bs-example-modal-lg" tabindex="-1" id="selectInfoName" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
		    <div class="modal-dialog modal-lg" style="top: 110px;">
		        <div class="modal-content">
		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
		                <h4 class="modal-title">故障详情</h4>
		            </div>
		            <div class="modal-body">
		                <form id="selectInfoNameForm" class="form-horizontal form-bordered" role="form">
		                    <div class="form-group">
		                        <!-- <label for="updatefamilyType" class="col-sm-2 control-label no-padding-right">审核状态:</label> -->
		                        <div class="col-sm-10" style="width: 100%">
		                            <select class="form-control" id="infoName" name="infoName" style="width: 100%;">
		                        		
		                        	</select>
		                        </div>
		                    </div>
		                    
							<div class="form-group">
								<div class="col-sm-offset-2 col-sm-10" style="text-align: center;">
									<button type="button" id="infotNameBtn" class="btn" style="background-color:#02bb99; color:#fefefe;border:0;width: 40%;">保存</button>
								</div>
							</div>
		                </form>
		            </div>
		        </div>
		    </div>
		</div>
		<!-- 选择公共报修类型 -->
		<div class="modal fade bs-example-modal-lg" tabindex="-1" id="selectPublicInfoName" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
		    <div class="modal-dialog modal-lg" style="top: 136px;">
		        <div class="modal-content">
		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
		                <h4 class="modal-title">选择报修类型</h4>
		            </div>
		            <div class="modal-body">
		                <form id="selectPublicInfoNameForm" class="form-horizontal form-bordered" role="form">
		                    <div class="form-group">
		                        <!-- <label for="updatefamilyType" class="col-sm-2 control-label no-padding-right">审核状态:</label> -->
		                        <div class="col-sm-10" style="width: 100%">
		                            <select class="form-control" id="PublicInfoName" name="PublicInfoName" style="width:100%;">
		                        			
		                        	</select>
		                        </div>
		                    </div>
		                    
							<div class="form-group">
								<div class="col-sm-offset-2 col-sm-10" style="text-align: center;">
									<button type="button" id="publicInfoNameBtn" class="btn" style="background-color:#02bb99; color:#fefefe;border:0;width: 40%;">保存</button>
								</div>
							</div>
		                </form>
		            </div>
		        </div>
		    </div>
		</div>
		
		
		
		
		<script id="selectfaultName" type="text/x-handlebars-template">
	
			{{#each rows}}
				{{#compare1 type 0}}
					<option value="{{id}}-{{faultName}}">{{faultName}}</option>
				{{/compare1}}
			{{/each}}
		</script>
		<script id="selectpublicFaultName" type="text/x-handlebars-template">
	
			{{#each rows}}
				{{#compare2 type 0}}
					<option value="{{id}}-{{faultName}}">{{faultName}}</option>
				{{/compare2}}
			{{/each}}
		</script>
		<script id="selectinfoName" type="text/x-handlebars-template">
			{{#each rows}}
				<option value="{{id}}-{{infoName}}">{{infoName}}</option>
			{{/each}}
		</script>
		<script src="../../assets/js/jquery.min.js"></script>
		<script src="../../assets/bootstrap/js/bootstrap.min.js"></script>
		<script src="../../assets/js/sweetalert/sweetalert.min.js"></script>
		<script src="../../assets/js/jquery.cookie.js"></script>
		<script src="../../assets/datetime/js/moment.js"></script>
		<script type="text/javascript" src="../../assets/datetime/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
		
		<script src="../../assets/js/validation/bootstrapValidator.js"></script>
		<script src="../../assets/jquery-fileupload/js/jquery.ui.widget.js"></script>
		<script src="../../assets/jquery-fileupload/js/jquery.iframe-transport.js"></script>
		<script src="../../assets/jquery-fileupload/js/jquery.fileupload.js"></script>
		<script src="../../assets/jquery-fileupload/preView.js"></script>
		<script src="../../js/util/handlebars-v4.0.5.js"></script>
		<script src="../../assets/js/weixin/jweixin-1.2.0.js"></script>
		<script src="../../js/util/main.js"></script>
		<script src="../../js/wechat_repair/wechat_repair.js"></script>
		
	</body>
</html>